<template>
  <!--  面包屑导航-->
  <div class="break">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>上岗管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>节假日配置</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索工具栏-->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="节日名称" prop="holiday_name">
        <el-input v-model="searchFormModel.holiday_name" placeholder="请输入节日" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchOnSubmit">查询</el-button>
        <el-button style="background-color: pink" @click="dialogAddState=true">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="blogInfo" stripe border style="width: 100%"
    >
      <el-table-column prop="holiday_name" label="节日" />
      <el-table-column prop="datetm" label="假期时间"  />
      <el-table-column prop="sork_status" label="是否工作状态">
        <template #default="scope">
          <el-tag :type="statusType(scope.row.sork_status)">
            {{ scope.row.sork_status }}
            <span v-if="scope.row.sork_status === '是'" class="status-indicator status-working"></span>
            <span v-if="scope.row.sork_status === '否'" class="status-indicator status-holiday"></span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="holiday_status" label="是否节假日">
        <template #default="scope">
          <el-tag :type="holidayType(scope.row.holiday_status)">
            {{ scope.row.holiday_status }}
            <span v-if="scope.row.holiday_status === '是'" class="status-indicator status-holiday"></span>
            <span v-if="scope.row.holiday_status === '否'" class="status-indicator status-working"></span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button size="small" @click="tableEditHandler(scope.$index, scope.row)">
            <el-icon><Edit /></el-icon>编辑
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="tableDeleteHandler(scope.$index, scope.row)">
            <el-icon><Delete /></el-icon>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3,5]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 添加模态框 -->
  <el-dialog v-model="dialogAddState" title="添加节日" width="680">
    <div>
      <el-form ref="formAddRef" :model="formAdd" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="holiday_name" label="节日名称">
              <el-input v-model="formAdd.holiday_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="datetm" label="节日时间">
              <el-input v-model="formAdd.datetm"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="sork_status" label="工作状态">
              <el-select v-model="formAdd.sork_status" placeholder="请选择">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="holiday_status" label="是否节假日">
              <el-select v-model="formAdd.holiday_status" placeholder="请选择">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary" @click="submitRegisterForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!--  编辑模态框-->
  <el-dialog v-model="dialogEditState" title="修改节日信息" width="700">
    <div>
      <el-form ref="formEditRef" :model="formEdit" label-width="120px">
        <el-form-item v-if="false" prop="id" label="序号">
          <el-input v-model="formEdit.id"></el-input>
        </el-form-item>
        <el-form-item prop="holiday_name" label="节日名称">
          <el-input v-model="formEdit.holiday_name" readonly style="background-color: darkgray"></el-input>
        </el-form-item>
        <el-form-item prop="datetm" label="节日时间">
          <el-input v-model="formEdit.datetm" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogEditOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {Unlock,Lock,Delete,Edit} from "@element-plus/icons";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/people";
import {ElMessage, ElMessageBox} from "element-plus";
onMounted(()=>{
  getHoliday();
})

const statusType = (status) => {
  if (status === '是') {
    return 'success'; // 绿色
  } else if (status === '否') {
    return 'danger'; // 红色
  } else {
    return '';
  }
};

const holidayType = (status) => {
  if (status === '否') {
    return 'danger'; // 红色
  } else if (status === '是') {
    return 'success'; // 绿色
  } else {
    return '';
  }
};
// 表格显示内容
const getHoliday = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };
  //模糊查询
  if (searchFormModel.holiday_name && searchFormModel.holiday_name.trim() !== '') {
    params.holiday_name = searchFormModel.holiday_name.trim();
  }
  request({
    url: '/holiday/canAll',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      blogInfo.value = req.data.data.records.map(item => ({
        ...item,

      }));
      totals.value = req.data.data.total;
    }
  })
}
//搜索
const searchFormRef=ref()
const searchFormModel=reactive({
  holiday_name:'',
  datetm:'',
  sork_status:'',
  holiday_status:'',
})
const searchOnSubmit=()=>{
  getHoliday()
}
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const  blogInfo=ref([])
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val;
  getHoliday()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value=val;
  getHoliday()
}


///////////////////添加/////////////////////////
const dialogAddState = ref(false);
const formAddData = {
  holiday_name:'',
  datetm:'',
  sork_status:'',
  holiday_status:'',
};
const validateChineseName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入姓名'));
  }
  // 正则表达式，匹配只包含汉字的字符串
  const regex = /^[\u4e00-\u9fa5]+$/;
  if (!regex.test(value)) {
    return callback(new Error('姓名只能输入汉字'));
  }
  callback();
};
const rules = reactive({
  holiday_name: [
    {required: true, message: '请输入节日名称', trigger: 'blur'},
    {validator: validateChineseName, trigger: 'blur'}
  ],
  datetm: [
    {required: true, message: '请输入放假时间', trigger: 'blur'}
  ],
  sork_status: [
    {required: true, message: '请选择状态', trigger: 'blur'}
  ],
  holiday_status: [
    {required: true, message: '请选择状态', trigger: 'blur'}
  ]
})
const formAdd = reactive({...formAddData});
const addressFormRef = ref(null); // 创建一个ref引用form
// 提交表单
const submitRegisterForm = ()=>{
  request({
    method:'post',
    url:'/holiday/add',
    params:formAdd
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200 == req.data.errorCode){
      Object.assign(formAdd,formAddData)
      getHoliday()
    }
  })
  dialogAddState.value=false;
}
const dialogAddOnReset = () => {
  Object.assign(formAdd , formAddData)
  dialogAddState.value = false
}
//////////////////编辑///////////////////////
const formEdit = reactive({...formAddData})
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formEdit.id = rowData.id
  formEdit.holiday_name = rowData.holiday_name
  formEdit.datetm = rowData.datetm
  formEdit.holiday_status = rowData.holiday_status
  formEdit.sork_status = rowData.sork_status
  dialogEditState.value = true
}
const dialogEditState = ref(false)

const dialogEditOnSubmit = () => {
  request({
    url:'/holiday/update',
    method:'put',
    data:JSON.stringify(formEdit),
    headers:{'content-type' : "application/json;charset=UTF-8"}
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200==req.data.errorCode){
      getHoliday();
    }
  })
  dialogEditState.value = false
}
const dialogEditOnReset = () => {
  Object.assign(formEdit , formAddData)
  dialogEditState.value = false
}


///////////////////删除/////////////////////////
const tableDeleteHandler = (rowIndex , rowData) => {
  ElMessageBox.confirm(
      '确认删除 : ' +rowData.holiday_name,
      'Warning',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {//点击了删除按钮
    request({
      method:'delete',
      url:'/holiday/del/'+rowData.id
    }).then(req=>{
      if (200==req.data.errorCode){
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getHoliday()
      }
    })
  })
      .catch(() => {//点击了取消按钮
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
</script>

<style scoped>
.page{
  margin-left: 40%;
}
.el-breadcrumb{
  font-size: 18px;
}
.break{
  margin: 5px 0 0 10px;
}
.status-indicator {
  display: inline-block;
  width: 10px;
  height: 5px;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: -3px;
  background-color: transparent !important; /* 防止el-tag背景色影响 */
}

.status-working {
  background-color: green;
}

.status-holiday {
  background-color: red;
}
</style>